<!-- 公示公告 -->
<template>
    <AllOut>
        <div style="position: relative;" v-loading="loading">
            <TopNav :show_links="true"></TopNav>
            <!-- <div class="navHader">
                <Nav :nav_value="3"></Nav>
            </div> -->
            <div class="content_out index_content" style="padding-top:140px;">
                <b-container fluid>
                  
                    <b-row>
                        <b-col md="12" sm="12" class="">
                            <div class="dangjian_detail_main">
                                <div class="dangjian_detail_main_img flex"> 
                                    <img class="" src="/img/back.png" alt="" @click="back()">
                                    <!-- <span>返回</span> -->
                                </div>
                                
                                <div class="dangjian_detail_mains">
                                    <h2 class="dangjian_detail_mains_1 fontz">{{ detailData.announcementTitle }}</h2>
                                    <div class="dangjian_detail_mains_2 fontz">
                                        来源：{{ detailData.announcementSource }} 发布时间：{{ detailData.createTime }} 浏览量：{{
                                            detailData.viewNumber || 0 }}
                                    </div>
                                    <div v-html="detailData.announcementContents" class="dangjian_detail_mains_3 fontz"></div>
                                    <div class="flex jcc" v-for="(item, index) in detailData.files" :key="index">
                                        <b-img :src="item.url" alt="" srcset="" style="margin-bottom: 16px;" />
                                    </div>
                                    <el-table :data="detailData.remark" style="width: 100%;margin-top: 16px;">
                                        <el-table-column label="录用名单" align="center">
                                            <el-table-column prop="fullName" label="姓名" align="center" />
                                            <el-table-column prop="positionName" label="岗位名称" align="center" />
                                            <el-table-column prop="idNumber" label="身份证号" align="center" />
                                        </el-table-column>
                                    </el-table>
                                    <div class="flex">
                                        <p v-for="(item, index) in detailData.files" :key="index"><a :href="item.url"></a>
                                        </p>
                                    </div>


                                </div>
                            </div>
                        </b-col>
                    </b-row>

                </b-container>
            </div>
        </div>
    </AllOut>
</template>
<script>
import {
    companyAnnouncementDetail,
} from "@/api/my.js"
export default {
    data() {
        return {
            loading: false,
            detailData: {}
        }
    },
    mounted() {
        this.partyNewsIdApi(this.getUrlParams().id)
    },
    methods: {
        back(){
            this.$router.push(`conpany_detail?id=${this.getUrlParams().backId}`)
        },
        //----------------------------------------------------- 获取地址栏参数---------------------------------
        getUrlParams() {
            let url = window.location.search; //获取url中"?"符后的字串
            let paramsObj = new Object();
            if (url.indexOf("?") != -1) {
                let str = url.substr(1);
                str = str.split("&");
                for (let i = 0; i < str.length; i++) {
                    paramsObj[str[i].split("=")[0]] = decodeURI(str[i].split("=")[1]);
                }
            }
            return paramsObj;
        },
        partyNewsIdApi(params) {
            this.loading = true
            companyAnnouncementDetail(params).then(res => {
                this.loading = false
                console.log("详情:", res);
                this.detailData = res.data
            }).catch(res => {

            })
        },
    },
}
</script>

<style lang="scss" scoped>
.navHader {
    position: absolute;
    width: calc(100% + 10px);
    padding: 0 160px;
    top: 140px;
    left: -5px;
    z-index: 999;
}

.gongshi_img {
    img {
        width: 100%;
    }
}

.dangjain_detail_nav {
    margin: 16px 0px 10px 0px;
    padding: 0px 22px;
    height: 50px;
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid #2F6CBC;

    span {
        font-size: 18px;
    }

    img {
        width: 24px;
        height: 24px;
        margin: 0px 6px;
    }
}

.gongshi_main {
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    padding: 0px 22px;
    opacity: 1;
    border: 1px solid #2F6CBC;

    li {
        padding: 20px 0px;
        border-bottom: 1px dashed #2F6CBC;
    }

    margin-bottom: 28px;
}


.dangjian_detail_main {
    margin-top: 10px;
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    // border: 1px solid #2F6CBC;
    padding: 0 35px;
    position: relative;
    .dangjian_detail_main_img{
        position: absolute;

    }
    .dangjian_detail_mains {
        padding: 20px 0px 30px 0px;

        img {
            max-width: 100%;
        }

        .dangjian_detail_mains_1 {
            text-align: center;
            margin-bottom: 20px;
            font-size: 24px;
            font-weight: 700;
            color: #000000;
        }

        .dangjian_detail_mains_2 {
            text-align: center;
            font-size: 16px;
            font-family: 'Microsoft YaHei-Regular, Microsoft YaHei';
            font-weight: 400;
            color: #d5d5d5;
            margin-bottom: 30px;
        }

        .dangjian_detail_mains_3 {
            font-size: 16px;
            font-family: 'Microsoft YaHei-Regular, Microsoft YaHei';
            font-weight: 400;
            color: #3D3D3D;
            line-height: 32px;
        }
    }

    .dangjian_detail_main_footer {
        padding: 0 22px;
        height: 125px;
        border-top: 1px solid #2F6CBC;

        span {
            font-size: 18px;
            font-weight: 400;
            color: #898989;

            &:hover {
                color: #2F6CBC;
            }
        }
    }
}
</style>